<template>
	<view class="page">
		<u-sticky>
			<view class="placeholder-bar" :style="{height: `${statusBarHeight}px`}"></view>
		</u-sticky>
		<u-sticky :offsetTop="statusBarHeight">
			<view class="top-bar">
				<view class="left-icon" @click="goBack()">
					<u-icon name="arrow-left" color="#232832" bold :size="20"></u-icon>
				</view>
				<view class="info" @click="goUser()">
					<view class="avatar">
						<u-avatar :size="32" src='/static/1.png'></u-avatar>
					</view>
					<view class="nickname">豌豆爱旅行</view>
				</view>
				<view class="btn">
					<u-icon name="plus" border :size="16" color="#6E86FF"></u-icon>
				</view>
			</view>
		</u-sticky>
		<c-content :top="statusBarHeight + 44" padding="10px 22px" :bottom="inputBarBottom">
			<view class="article-content">
				<u-parse>
					dasdasddddddddddd
					asdaaaaaaaaaa
					asdasssssssssssssssss
					2131231
				</u-parse>
			</view>
			<u-album :urls="list" borderRadius="8px" :space="10" :multipleSize="boxSize"></u-album>
			<view class="article-info">
				<view class="city">
					<u-icon name="map-fill" color="#B9BCC3" :size="14"></u-icon>
					<text>合肥</text>
				</view>
				<view class="date">2023-07-28</view>
			</view>
			<u-divider dot></u-divider>
			<view class="comment">
				<view class="title">评论(124)</view>
				<view>
					<view class="comment-item">
						<view class="user">
							<view class="avatar">
								<u-avatar src="/static/1.png" :size="36"></u-avatar>
							</view>
							<view class="info">
								<view class="nickname">蔷薇映画馆</view>
								<view class="date">9分钟前</view>
							</view>
							<view class="thumb">
								<text class="icon-thumb"></text>
								<text>3200</text>
							</view>
						</view>
						<view class="comment-content">
							<view class="user-comment">
								性价比非常高，一价全包，包含的餐厅和出海性价比非常高，一价全包，包含的餐厅和出海，包含的餐厅和出海，包含的餐厅和出海，包含的餐厅和出海
							</view>
							<view class="reply-comment">
								<view class="comment-item" v-for="i in is" :key="i">
									<view class="user">
										<view class="avatar">
											<u-avatar src="/static/1.png" :size="24"></u-avatar>
										</view>
										<view class="info">
											<view class="nickname">蔷薇映画馆</view>
											<view class="date">9分钟前</view>
										</view>
										<view class="thumb">
											<text class="icon-thumb"></text>
											<text>3200</text>
										</view>
									</view>
									<view class="commnet-content">
										<view class="user-comment">
											性价比非常高，一价全包，包含的餐厅和出海
										</view>
									</view>
								</view>
							</view>
							<view class="loadmore">
								<view class="expand">
									<u-loadmore align="flex-start" color="#232832" width="60"></u-loadmore>
									<u-icon name="arrow-down" color="#232832" bold :size="14"></u-icon>
								</view>
								<view class="put-away">
									<text>收起</text>
									<u-icon name="arrow-up" color="#232832" bold :size="14"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="placeholder-bar-bottom" style="height: 108px;"></view>

			<view class="input-bar" :style="{paddingBottom: `${paddingBottom + 10}px`, bottom: `${inputBarBottom}px`}">
				<view class="input" :style="{borderRadius: borderRadius}">
					<u-input v-if="!input" prefixIcon="edit-pen" border="none" shape="circle"
						prefixIconStyle="color: #787B86;font-size: 20px;" placeholder="说些什么" placeholder-style="color: #787B86;"
						clearable :customStyle="inputStyle" disabled disabledColor="transparent" @click="input = true"></u-input>
					<textarea v-model="value" class="textarea" :show-confirm-bar="false" v-if="input" auto-focus
						:auto-height="false" maxlength="-1" :confirm-type="confirmType" :adjust-position="false"
						:style="{height: `${textareaHeight}px`}" disable-default-padding @blur="onBlur"
						@linechange="onInput"></textarea>
				</view>
				<view class="controll">
					<view class="thumb">
						<text class="icon-thumb"></text>
						<text>234</text>
					</view>
					<view class="comment" @click="show = true">
						<text class="icon-comment"></text>
						<text>108</text>
					</view>
				</view>
			</view>
		</c-content>

		<u-popup :show="show" :round="20" :safeAreaInsetBottom="false">
			<view class="popup-comment">
				<view class="popup-header">
					<view class="popup-header__label">
						评论(124)
					</view>
					<view class="popup-header__close" @click="show = false">
						<u-icon name="arrow-down" bold color="#787B86"></u-icon>
					</view>
				</view>
				<view class="popup-content" :style="{height: `${popupHeight}px`}">
					<view class="comment">
						<view>
							<view class="comment-item" v-for="x in 4" :key="x">
								<view class="user">
									<view class="avatar">
										<u-avatar src="/static/1.png" :size="36"></u-avatar>
									</view>
									<view class="info">
										<view class="nickname">蔷薇映画馆</view>
										<view class="date">9分钟前</view>
									</view>
									<view class="thumb">
										<text class="icon-thumb"></text>
										<text>3200</text>
									</view>
								</view>
								<view class="comment-content">
									<view class="user-comment">
										性价比非常高，一价全包，包含的餐厅和出海性价比非常高，一价全包，包含的餐厅和出海，包含的餐厅和出海，包含的餐厅和出海，包含的餐厅和出海
									</view>
									<view class="reply-comment">
										<view class="comment-item" v-for="i in 1" :key="i">
											<view class="user">
												<view class="avatar">
													<u-avatar src="/static/1.png" :size="24"></u-avatar>
												</view>
												<view class="info">
													<view class="nickname">蔷薇映画馆</view>
													<view class="date">9分钟前</view>
												</view>
												<view class="thumb">
													<text class="icon-thumb"></text>
													<text>3200</text>
												</view>
											</view>
											<view class="commnet-content">
												<view class="user-comment">
													性价比非常高，一价全包，包含的餐厅和出海
												</view>
											</view>
										</view>
									</view>
									<view class="loadmore">
										<view class="expand">
											<u-loadmore align="flex-start" color="#232832" width="60"></u-loadmore>
											<u-icon name="arrow-down" color="#232832" bold :size="14"></u-icon>
										</view>
										<view class="put-away">
											<text>收起</text>
											<u-icon name="arrow-up" color="#232832" bold :size="14"></u-icon>
										</view>
									</view>
								</view>
							</view>
							<view class="placeholder-bar-bottom" style="height: 108px;"></view>
						</view>
					</view>
				</view>

				<view class="input-bar"
					:style="{paddingBottom: `${paddingBottom + 10}px`, bottom: `${inputBarBottom}px`, alignItems: 'center'}">
					<view class="input" :style="{borderRadius: popupBorderRadius}">
						<u-input v-if="!popupInput" prefixIcon="edit-pen" border="none" shape="circle"
							prefixIconStyle="color: #787B86;font-size: 20px;" placeholder="说些什么" placeholder-style="color: #787B86;"
							clearable :customStyle="inputStyle" disabled disabledColor="transparent"
							@click="popupInput = true"></u-input>
						<textarea v-model="popupValue" class="popup-textarea" :show-confirm-bar="false"
							:style="{height: `${popupTextareaHeight}px`}" disable-default-padding v-if="popupInput" auto-focus
							maxlength="-1" auto-height :confirm-type="confirmType" :adjust-position="false" @blur="onPopupBlur"
							@linechange="onPopupInput"></textarea>
					</view>
					<view class="controll">
						<text class="icon-send"></text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import mixins from '@/mixins/index.js'
	export default {
		mixins: [mixins],
		data() {
			return {
				list: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				is: 1,
				show: false,
				input: false,
				popupInput: false,
				value: '',
				popupValue: '',
				borderRadius: '20px',
				popupBorderRadius: '20px',
				textareaHeight: 19,
				popupTextareaHeight: 19,
				inputBarBottom: 0,
				paddingBottom: 0,
			}
		},
		computed: {
			boxSize() {
				return (uni.getSystemInfoSync().windowWidth - 44 - 20) / 3
			},
			inputStyle() {
				return {
					padding: '0 8px',
					height: '19px'
				}
			},
			popupHeight() {
				return (uni.getSystemInfoSync().windowHeight * 2 / 3).toFixed(2)
			},
			confirmType() {
				return uni.getSystemInfoSync().osName == 'ios' ? 'send' : 'done'
			}
		},
		mounted() {
			this.paddingBottom = this.safeAreaBottom
			uni.onKeyboardHeightChange(rs => {
				this.inputBarBottom = rs.height
				if (rs.height == 0) {
					this.paddingBottom = this.safeAreaBottom
				} else {
					this.paddingBottom = 0
				}
			})
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			goUser() {
				uni.navigateTo({
					url: '/pages/common/user'
				})
			},
			onBlur() {
				if (!this.value) {
					this.input = false
				}
			},
			onPopupBlur() {
				if (!this.popupValue) {
					this.popupInput = false
				}
			},
			onInput(e) {
				this.textareaHeight = e.detail.height
				if (e.detail.lineCount > 1) {
					if (this.borderRadius == '4px') return
					this.borderRadius = '4px'
				} else {
					if (this.borderRadius == '20px') return
					this.borderRadius = '20px'
				}
			},
			onPopupInput(e) {
				this.popupTextareaHeight = e.detail.height
				if (e.detail.lineCount > 1) {
					if (this.popupBorderRadius == '4px') return
					this.popupBorderRadius = '4px'
				} else {
					if (this.popupBorderRadius == '20px') return
					this.popupBorderRadius = '20px'
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.top-bar {
		display: flex;
		align-items: center;
		height: 44px;

		.left-icon {
			padding: 0 13px;
		}

		.info {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			/* #ifdef MP-WEIXIN */
			width: auto;
			/* #endif */
			/* #ifdef APP */
			width: 100%;
			/* #endif */
		}

		.nickname {
			/* #ifdef MP-WEIXIN */
			width: 84px;
			/* #endif */
			/* #ifdef APP */
			width: 100%;
			/* #endif */
			padding-left: 13px;
			color: #232832;
			font-size: 15px;
			lighting-color: 18px;
			font-weight: 400;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 3px 14px;
			border: 1px solid #6E86FF;
			border-radius: 12px;
			margin: 0 14px 0 13px;
		}
	}

	.content {
		padding: 10px 22px;
	}

	.article-content {
		margin: 10px 0;
		color: #232832;
	}

	.article-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		margin-top: 14px;
		color: #B9BCC3;
		font-size: 12px;
		line-height: 14px;
		font-weight: 400;

		.city {
			display: flex;
			align-items: center;
			margin-bottom: 6px;
		}
	}

	.comment {

		.title {
			margin-bottom: 20px;
			color: #787B86;
			font-size: 15px;
			line-height: 18px;
			font-weight: 400;
		}

		.user {
			display: flex;
			align-items: center;

			.info {
				flex: 1;
				margin-left: 10px;
			}

			.nickname {
				color: #232832;
				font-size: 15px;
				font-weight: 500;
				line-height: 18px;
			}

			.date {
				margin-top: 4px;
				color: #B9BCC3;
				font-size: 10px;
				line-height: 12px;
				font-weight: 400;
			}

			.thumb {
				display: flex;
				align-items: center;
				color: #787B86;

				text:last-child {
					margin-left: 8px;
					font-size: 12px;
					line-height: 14px;
					font-weight: 400;
				}
			}
		}

		.comment-content {
			padding-left: 46px;
			color: #232832;
			font-size: 14px;
			font-weight: 400;
			line-height: 20px;
		}

		.user-comment {
			margin: 10px 0;
			max-height: 60px;
			overflow: hidden;
		}

		.reply-comment {
			.nickname {
				font-size: 12px;
				font-weight: 500;
				line-height: 14px;
			}

			.date {
				margin-top: 2px;
			}

			.thumb {

				text:last-child {
					margin-left: 8px;
					font-size: 10px;
					line-height: 12px;
				}
			}
		}

		.loadmore {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			color: #232832;

			&>view {
				display: flex;
				align-items: center;
				flex: 0 0 60px;
			}

			.put-away {
				margin-left: 16px;
				font-size: 12px;

				text {
					margin-right: 6px;
				}
			}
		}
	}

	.input-bar {
		position: absolute;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: flex-end;
		width: 100%;
		padding: 8px 0;
		background-color: #FFFFFF;
		box-shadow: 0px -0.5px 0px rgba(0, 0, 0, 0.3);

		.input {
			width: 100%;
			background-color: #F4F4F7;
			margin: 0 22px;
			border-radius: 20px;
			padding: 6px 0;
		}

		.controll {
			display: flex;
			align-items: center;
			height: 31px;
			margin-right: 6px;
			color: #232832;
			font-size: 15px;
			line-height: 18px;
			font-weight: 500;

			&>view {
				display: flex;
				align-items: center;
				margin-right: 16px;
			}

			text:first-child {
				margin-right: 10px;
				font-size: 20px;
			}
		}

		.textarea {
			width: auto;
			max-height: 73px;
			padding: 0 12px;
			color: #232832;
			font-size: 15px;
			line-height: 19px;
			font-weight: 400;
		}
	}

	.popup-comment {
		position: relative;
		border-radius: 20px 20px 0 0;
		background-color: #FFFFFF;

		.popup-header {
			display: flex;
			align-items: center;
			margin: 0 22px;
			padding: 18px 0;

			&__label {
				width: 100%;
				color: #232832;
			}
		}

		.popup-content {
			margin: 2px 22px 0;
			overflow-y: auto;
		}

		.controll {
			justify-content: center;
			flex: 0 0 40px;
			height: 40px;
			margin-right: 22px;
			border-radius: 50%;
			background-color: #FF4E4D;
			color: #FFFFFF;

			text {
				margin-right: 3px !important;
			}
		}

		.popup-textarea {
			width: auto;
			max-height: 73px;
			padding: 0 12px;
			color: #232832;
			font-size: 15px;
			line-height: 19px;
			font-weight: 400;
		}
	}
</style>